import { coupons, goods, selectTurn } from '@/services/sales/sweep';
import { ProTable } from '@ant-design/pro-components';
import { useSelector } from '@umijs/max';
import { InputNumber, Modal, Radio, Space, Table } from 'antd';
import { useEffect, useState } from 'react';

const App = ({ turntableId, radioRef, value, onChange }) => {
  const [prizeType, setPrizeType] = useState(value?.prizeType || 1);
  const [rataShow, setRataShow] = useState(value?.item);
  const [visible, setVisible] = useState(false);
  const [count, setCount] = useState(value?.typeValue || 0);

  const {
    sweepstakes: { type },
  } = useSelector((state) => state);

  const getDteail = async () => {
    const data = await selectTurn({ id: turntableId });
    console.log('data: ', data);
  };

  useEffect(() => { }, []);

  useEffect(() => {
    if (value?.prizeType === 1 || value?.prizeType === 2) {
      if (value?.prizeName) {
        if (type === 'edit') {
          getDteail();
        }
      }
    }
    setPrizeType(value?.prizeType || 1);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value?.prizeType]);

  return (
    <Radio.Group
      value={prizeType}
      onChange={(e) => {
        radioRef?.current?.resetFields();
        setPrizeType(e.target.value);
        setRataShow([]);
        setCount(0);

        console.log('e.target.value: ', e.target.value);
        if (e.target.value === 1) {
          radioRef?.current?.setFieldsValue({
            trophy: { prizeType: e.target.value },
            prizeName: '赠品',
            prizeStock: 0,
          });
        }
        if (e.target.value === 2) {
          radioRef?.current?.setFieldsValue({
            trophy: { prizeType: e.target.value },
            prizeName: '优惠券',
            prizeStock: 0,
          });
        }
        if (e.target.value === 3) {
          radioRef?.current?.setFieldsValue({
            trophy: { prizeType: e.target.value },
            prizeName: '积分',
            prizeStock: 1,
          });
        }
        if (e.target.value === 4) {
          onChange({
            prizeType: 4,
            prizeName: '谢谢参与',
            prizeStock: 1,
            typeValue: -1,
          });
          radioRef?.current?.setFieldsValue({
            trophy: { prizeType: e.target.value },
            prizeName: '谢谢参与',
            prizeStock: 1,
          });
        }
      }}
    >
      <Space direction="vertical">
        <Radio value={1}>
          赠品
          {prizeType === 1 && (
            <a
              style={{ marginLeft: 10 }}
              onClick={() => {
                setVisible(true);
              }}
            >
              请选择赠品
            </a>
          )}
        </Radio>
        {prizeType === 1 && rataShow?.length > 0 && (
          <Table
            rowKey="id"
            dataSource={rataShow}
            pagination={false}
            columns={[
              {
                title: '商品信息',
                dataIndex: 'id',
                width: 200,
                render: (_, record) => (
                  <div>
                    <div>{record?.itemName}</div>
                    <div>ID：{record?.id}</div>
                  </div>
                ),
              },
              {
                title: '赠品类型',
                dataIndex: 'profitType',
                width: 200,
                render: (txt) => goodsEnum[txt],
              },
              {
                title: '商品库存',
                dataIndex: 'stock',
                width: 200,
              },
            ]}
          />
        )}
        <Radio value={2}>
          优惠券
          {prizeType === 2 && (
            <a
              style={{ marginLeft: 10 }}
              onClick={() => {
                setVisible(true);
              }}
            >
              请选择优惠券
            </a>
          )}
        </Radio>
        {prizeType === 2 && rataShow?.length > 0 && (
          <Table
            rowKey="turntableId"
            dataSource={rataShow}
            pagination={false}
            columns={[
              {
                title: '优惠券信息',
                dataIndex: 'turntableId',
                render: (_, record) => (
                  <div>
                    <div>{record?.itemName}</div>
                    <div>ID：{record?.id}</div>
                  </div>
                ),
              },
              {
                title: '优惠券内容',
                dataIndex: 'profitType',
                render: (_, record) => (
                  <>
                    <div>
                      {record?.type === 2 && `满${record?.minimumConsumption}减${record?.price}`}
                      {record?.type === 3 && `满${record?.minimumConsumption}打${record?.price}折`}
                    </div>
                    <div style={{ color: '#ccc', width: 110 }}>
                      {typeEnum?.[record?.availableProductTypes]?.text}
                    </div>
                  </>
                ),
              },
              {
                title: '优惠券库存',
                dataIndex: 'count',
              },
            ]}
          />
        )}
        <Radio value={3}>
          积分
          {prizeType === 3 ? (
            <span>
              <InputNumber
                style={{
                  width: 100,
                  marginLeft: 10,
                }}
                stringMode
                controls={false}
                precision={0}
                min={0}
                value={count}
                onChange={(value) => {
                  setCount(value);
                  onChange({
                    prizeType: prizeType,
                    prizeName: '积分',
                    prizeStock: 1,
                    typeValue: value,
                  });
                }}
                placeholder="销售库存"
              />
              积分
            </span>
          ) : null}
        </Radio>
        <Radio value={4}>谢谢参与</Radio>
      </Space>
      <Modal
        width={800}
        open={visible}
        title="添加商品"
        footer={null}
        onCancel={() => setVisible(false)}
        destroyOnClose
      >
        <ProTable
          headerTitle=""
          options={false}
          search={{
            labelWidth: 'auto',
            style: {
              padding: '24px 12px',
            },
          }}
          rowKey="id"
          request={async (params = {}) => {
            const { current, pageSize, ...formData } = params;
            let body = {
              pageNum: current,
              pageSize,
              ...formData,
            };
            const getPage = prizeType === 1 ? goods : coupons;
            const { code, result } = await getPage(body);
            if (code && code === 200) {
              return {
                data: result.records || [],
                total: result.total,
                success: true,
              };
            }
          }}
          pagination={{
            showSizeChanger: true,
          }}
          cardProps={{
            size: 'small',
            style: {
              padding: 0,
            },
          }}
          cardBordered={true}
          columns={
            prizeType === 1
              ? [
                {
                  title: '商品信息/ID',
                  dataIndex: 'keyword',
                  hideInTable: true,
                },
                {
                  title: '商品信息',
                  dataIndex: 'turntableId',
                  hideInSearch: true,
                  render: (_, record) => (
                    <div>
                      <div>{record?.itemName}</div>
                      <div>ID：{record?.id}</div>
                    </div>
                  ),
                },
                {
                  title: '赠品类型',
                  dataIndex: 'profitType',
                  valueType: 'select',
                  valueEnum: {
                    0: '商品',
                    1: '非卖品',
                  },
                },
                {
                  title: '商品库存',
                  dataIndex: 'stock',
                  hideInSearch: true,
                },
                {
                  title: '操作',
                  dataIndex: 'moreSkus',
                  hideInSearch: true,
                  render: (_, record) =>
                    record?.moreSkus ? (
                      <a
                        onClick={() => {
                          setRataShow([record]);
                          onChange({
                            prizeType: prizeType,
                            prizeName: record?.itemName,
                            prizeStock: record?.stock,
                            turntableImage: record?.mainGraph,
                            typeValue: record?.id,
                            item: [record],
                          });
                          radioRef?.current?.setFieldsValue({
                            prizeName: record?.itemName,
                            prizeStock: record?.stock,
                            turntableImage: [{ url: record?.mainGraph }],
                          });
                          setVisible(false);
                        }}
                      >
                        选择
                      </a>
                    ) : (
                      <span>--</span>
                    ),
                },
              ]
              : [
                {
                  title: '优惠券名称',
                  dataIndex: 'name',
                  hideInTable: true,
                },
                {
                  title: '优惠券信息',
                  dataIndex: 'name',
                  hideInSearch: true,
                  render: (_, record) => (
                    <div>
                      <div>{record?.name}</div>
                      <div>ID：{record?.id}</div>
                    </div>
                  ),
                },
                {
                  title: '优惠内容',
                  dataIndex: 'profitType',
                  hideInSearch: true,
                  render: (_, record) => (
                    <>
                      <div>
                        {record?.type === 2 &&
                          `满${record?.minimumConsumption}减${record?.price}`}
                        {record?.type === 3 &&
                          `满${record?.minimumConsumption}打${record?.price}折`}
                      </div>
                      <div style={{ color: '#ccc', width: 110 }}>
                        {typeEnum?.[record?.availableProductTypes]?.text}
                      </div>
                    </>
                  ),
                },
                {
                  title: '优惠券库存',
                  dataIndex: 'count',
                  hideInSearch: true,
                },
                {
                  title: '操作',
                  dataIndex: 'moreSkus',
                  hideInSearch: true,
                  render: (_, record) => (
                    <a
                      onClick={() => {
                        setRataShow([record]);
                        onChange({
                          prizeType: prizeType,
                          prizeName: record?.name,
                          prizeStock: record?.count,
                          typeValue: record?.id,
                          item: [record],
                        });
                        radioRef?.current?.setFieldsValue({
                          prizeName: record?.name,
                          prizeStock: record?.count,
                          turntableImage: null,
                        });
                        setVisible(false);
                      }}
                    >
                      选择
                    </a>
                  ),
                },
              ]
          }
        />
      </Modal>
    </Radio.Group>
  );
};
export default App;

const typeEnum = {
  1: {
    text: '全场商品可用',
  },
  2: {
    text: '自营商品可用',
  },
  3: {
    text: '指定商品可用',
  },
};

const goodsEnum = {
  0: '商品',
  1: '非卖品',
};
